<script setup>
import { computed, ref } from 'vue';
import { getEvaluateDoctor } from '@/apis/doctor.js';

const props=defineProps({
	orderId:String,
	docId:String,
	//是否已评价过
	hasEvaluate:Boolean,
	 // 评价的内容
	evaluateDoc: {
	    type: Object,
	    default: {}
	  }
})

//定义评价内容
const formData=ref({
	score:props.evaluateDoc.score||0,
	content:props.evaluateDoc.content||'',
	anonymousFlag:0,
})


//获取匿名评价
const onAnonymous=()=>{
	return formData.value.anonymousFlag=Math.abs(formData.value.anonymousFlag-1)
}
//获取禁用按钮
const disabled=computed(()=>{
	return formData.value.score===0||formData.value.content===''
})

//提交评价
const onSubmit=async()=>{
	const res=await getEvaluateDoctor({
		docId:props.docId,
		orderId:props.orderId,
		score:formData.value.score,
		content:formData.value.content,
		anonymousFlag:formData.value.anonymousFlag
	})
	console.log(res.data.id);
	uni.showToast({
		icon:"none",
		title:'感谢您的评价!'
	})
}
</script>
<template>
  <!-- 医生评价 -->
  <view class="doctor-rating">
    <view class="title">医生服务评价</view>
    <view class="subtitle">本次在线问诊服务您还满意吗？</view>
    <view class="rating">
      <uni-rate :size="28" margin="12" v-model="formData.score"/>
    </view>
    <view class="text">
      <uni-easyinput
        type="textarea"
        maxlength="150"
        :input-border="false"
        :styles="{ backgroundColor: '#f6f6f6' }"
        placeholder-style="font-size: 28rpx; color: #979797"
        placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
				v-model="formData.content"
      />
      <text class="word-count">{{props.evaluateDoc.content.length||0}}/150</text>
    </view>
    <view class="anonymous" @click="onAnonymous">
      <uni-icons v-if="formData.anonymousFlag===1" size="16" color="#16C2A3" type="checkbox-filled" />
      <uni-icons v-else size="16" color="#d1d1d1" type="circle" />
      <text class="label">匿名评价</text>
    </view>
    <button :disabled="disabled" class="uni-button" @click="onSubmit" v-if="!hasEvaluate">提交</button>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style lang="scss">
.doctor-rating {
  padding: 30rpx 30rpx 40rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin-top: 60rpx;

  .title {
    text-align: center;
    font-size: 30rpx;
    color: #121826;
  }

  .subtitle {
    text-align: center;
    font-size: 24rpx;
    color: #6f6f6f;
    margin: 10rpx 0 20rpx;
  }

  .rating {
    display: flex;
    justify-content: center;
  }

  .text {
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background-color: #f6f6f6;
    border-radius: 20rpx;
    position: relative;
  }

  :deep(.uni-easyinput__content-textarea) {
    font-size: 28rpx;
  }

  .word-count {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    line-height: 1;
    font-size: 24rpx;
    color: #6f6f6f;
  }

  .anonymous {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx 0;
    color: #6f6f6f;
    font-size: 24rpx;

    .label {
      margin-left: 6rpx;
    }
  }

  .uni-button[disabled] {
    color: #a6dbd5;
    background-color: #eaf8f6;
  }
}
</style>